<template>
  <view class="components-demo">
    <ResponsiveContainer>
      <BaseCard title="组件示例页面" subtitle="展示基础组件的使用方法">
        <view class="demo-section">
          <view class="section-title">
            <text class="section-title-text">FunctionCard 组件</text>
          </view>
          
          <view class="card-grid">
            <FunctionCard 
              icon="⚙️" 
              name="系统设置" 
              description="个性化设置"
              gradientClass="gradient-purple"
              @click="showMessage('系统设置')"
            />
            
            <FunctionCard 
              icon="🔄" 
              name="数据同步" 
              description="同步服务器数据"
              gradientClass="gradient-blue"
              @click="showMessage('数据同步')"
            />
            
            <FunctionCard 
              icon="📅" 
              name="每日签到"
              gradientClass="gradient-red"
              @click="showMessage('每日签到')"
            >
              <template #badge>
                <view class="demo-badge">可签到</view>
              </template>
            </FunctionCard>
          </view>
        </view>
        
        <view class="demo-section">
          <view class="section-title">
            <text class="section-title-text">BaseButton 组件</text>
          </view>
          
          <view class="button-demo">
            <BaseButton text="主要按钮" @click="showMessage('点击了主要按钮')" />
            <BaseButton type="secondary" text="次要按钮" @click="showMessage('点击了次要按钮')" />
            <BaseButton type="success" text="成功按钮" @click="showMessage('点击了成功按钮')" />
            <BaseButton type="warning" text="警告按钮" @click="showMessage('点击了警告按钮')" />
            <BaseButton type="danger" text="危险按钮" @click="showMessage('点击了危险按钮')" />
            <BaseButton type="info" text="信息按钮" @click="showMessage('点击了信息按钮')" />
            <BaseButton type="text" text="文本按钮" @click="showMessage('点击了文本按钮')" />
          </view>
          
          <view class="button-demo">
            <BaseButton size="small" text="小按钮" />
            <BaseButton size="normal" text="正常按钮" />
            <BaseButton size="large" text="大按钮" />
          </view>
          
          <view class="button-demo">
            <BaseButton icon="👍" text="带图标按钮" />
            <BaseButton icon="🔄" text="右侧图标" iconPosition="right" />
            <BaseButton text="圆角按钮" round />
            <BaseButton text="禁用按钮" disabled />
            <BaseButton text="加载中" loading />
          </view>
          
          <view class="button-demo">
            <BaseButton text="打开模态框" @click="showModal = true" />
          </view>
        </view>
        
        <view class="demo-section">
          <view class="section-title">
            <text class="section-title-text">BaseCard 组件</text>
          </view>
          
          <view class="card-demo">
            <BaseCard title="基础卡片" subtitle="这是一个基础卡片示例">
              <text>这是卡片内容区域</text>
            </BaseCard>
            
            <BaseCard>
              <template #header>
                <view class="custom-header">
                  <text class="header-title">自定义头部</text>
                  <text class="header-subtitle">使用插槽</text>
                </view>
              </template>
              <text>这是卡片内容</text>
            </BaseCard>
            
            <BaseCard title="带额外操作的卡片">
              <template #extra>
                <text class="card-more" @click="showMessage('点击了更多')">更多</text>
              </template>
              <text>这是卡片内容</text>
            </BaseCard>
            
            <BaseCard title="带底部的卡片">
              <text>这是卡片内容</text>
              <template #footer>
                <view class="card-actions">
                  <BaseButton size="small" text="确认" />
                  <BaseButton size="small" type="secondary" text="取消" />
                </view>
              </template>
            </BaseCard>
            
            <BaseCard 
              title="自定义样式" 
              hoverable 
              background="#f8f9fa"
              borderRadius="32"
              padding="32"
            >
              <text>这是一个可悬浮的卡片，点击有效果</text>
            </BaseCard>
          </view>
        </view>
      </BaseCard>
    </ResponsiveContainer>
    
    <!-- 模态框示例 -->
    <BaseModal 
      :visible="showModal" 
      title="模态框示例" 
      :showCancel="true"
      :showConfirm="true"
      @close="showModal = false"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    >
      <view class="modal-content-demo">
        <text class="modal-text">这是一个基础模态框示例，展示了模态框组件的基本用法。</text>
        <text class="modal-subtext">您可以通过点击取消或确认按钮关闭此模态框。</text>
      </view>
    </BaseModal>
    
    <!-- 底部模态框示例 -->
    <BaseModal 
      :visible="showBottomModal" 
      position="bottom"
      @close="showBottomModal = false"
    >
      <view class="bottom-sheet-content">
        <view class="sheet-title">底部弹出菜单</view>
        <view class="sheet-options">
          <view class="sheet-option" @click="selectOption('option1')">
            <text class="option-icon">📷</text>
            <text class="option-text">拍照</text>
          </view>
          <view class="sheet-option" @click="selectOption('option2')">
            <text class="option-icon">🖼️</text>
            <text class="option-text">从相册选择</text>
          </view>
          <view class="sheet-option" @click="selectOption('option3')">
            <text class="option-icon">📁</text>
            <text class="option-text">从文件选择</text>
          </view>
        </view>
        <view class="sheet-cancel" @click="showBottomModal = false">
          <text>取消</text>
        </view>
      </view>
    </BaseModal>
  </view>
</template>

<script>
import ResponsiveContainer from '@/components/layout/ResponsiveContainer.vue'
import FunctionCard from '@/components/functional/FunctionCard.vue'
import BaseButton from '@/components/base/BaseButton.vue'
import BaseCard from '@/components/base/BaseCard.vue'
import BaseModal from '@/components/base/BaseModal.vue'

export default {
  name: 'ComponentsDemo',
  components: {
    ResponsiveContainer,
    FunctionCard,
    BaseButton,
    BaseCard,
    BaseModal
  },
  data() {
    return {
      showModal: false,
      showBottomModal: false
    }
  },
  methods: {
    showMessage(message) {
      // 在实际应用中，这里可以使用uni.showToast或其他提示方法
      console.log(message)
      uni.showToast({
        title: message,
        icon: 'none'
      })
    },
    handleConfirm() {
      this.showMessage('点击了确认按钮')
      this.showModal = false
    },
    handleCancel() {
      this.showMessage('点击了取消按钮')
      this.showModal = false
    },
    showBottomSheet() {
      this.showBottomModal = true
    },
    selectOption(option) {
      this.showMessage(`选择了${option}`)
      this.showBottomModal = false
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/variables.scss';
@import '@/styles/mixins.scss';

.components-demo {
  padding: $spacing-md 0;
  background-color: $bg-page;
  min-height: 100vh;
}

.demo-section {
  margin-bottom: $spacing-xl;
}

.section-title {
  margin-bottom: $spacing-md;
  
  &-text {
    font-size: $font-size-lg;
    font-weight: $font-weight-bold;
    color: $text-primary;
    position: relative;
    padding-left: $spacing-md;
    
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 6rpx;
      height: 32rpx;
      background: $primary-color;
      border-radius: $border-radius-sm;
    }
  }
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: $spacing-md;
  margin-bottom: $spacing-lg;
}

.demo-badge {
  position: absolute;
  top: 12rpx;
  right: 12rpx;
  background: $gradient-red;
  color: white;
  font-size: $font-size-xs;
  padding: 4rpx 8rpx;
  border-radius: 8rpx;
  box-shadow: $shadow-sm;
}

.button-demo {
  display: flex;
  flex-wrap: wrap;
  gap: $spacing-md;
  margin-bottom: $spacing-lg;
}

.card-demo {
  display: flex;
  flex-direction: column;
  gap: $spacing-lg;
}

.custom-header {
  @include flex-column;
}

.header-title {
  font-size: $font-size-md;
  font-weight: $font-weight-bold;
  color: $primary-color;
}

.header-subtitle {
  font-size: $font-size-sm;
  color: $text-tertiary;
}

.card-more {
  color: $primary-color;
  font-size: $font-size-sm;
  cursor: pointer;
}

.card-actions {
  @include flex-between;
}

.modal-content-demo {
  padding: $spacing-md;
  text-align: center;
}

.modal-text {
  font-size: $font-size-base;
  color: $text-primary;
  margin-bottom: $spacing-md;
  line-height: $line-height-relaxed;
}

.modal-subtext {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.bottom-sheet-content {
  padding: $spacing-md 0;
}

.sheet-title {
  text-align: center;
  font-size: $font-size-md;
  color: $text-secondary;
  padding: $spacing-md 0;
}

.sheet-options {
  @include flex-column;
}

.sheet-option {
  @include flex-align-center;
  padding: $spacing-md $spacing-lg;
  
  &:active {
    background-color: $bg-light-gray;
  }
}

.option-icon {
  font-size: $font-size-xl;
  margin-right: $spacing-md;
}

.option-text {
  font-size: $font-size-base;
  color: $text-primary;
}

.sheet-cancel {
  text-align: center;
  margin-top: $spacing-md;
  padding: $spacing-md 0;
  border-top: 1px solid $border-color;
  color: $text-secondary;
  font-size: $font-size-base;
  
  &:active {
    background-color: $bg-light-gray;
  }
}
</style>
